class QueryFeedback extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            repairInfo: '',
            ownerInfo: '',
            treatmentSelectState: '1'
        }
    }

    componentDidMount() {
        layui.use(['form', 'laypage'], () => {
                this.layer = layui.layer;
                // noinspection ES6ModulesDependencies
                this.form = layui.form();
                this.queryVisitor();
                this.form.on('select(selectState)', function (data) {
                    this.queryVisitor();
                }.bind(this));

                this.form.on('select(treatmentSelectState)', (data) => {
                    this.setState({
                        treatmentSelectState: data.value
                    });
                });
                this.refs.buildingSelectList.layuiInitComplete();
                this.refs.buildingSelectList.queryList();
            }
        );
    }

    selectCommCallback() {
        this.queryVisitor();
    }

    queryVisitor(page) {
        let params = {};
        params.page = page ? page : 1;
        params.pageSize = 10;
        params.commCode = this.refs.buildingSelectList.getDefCommCode() === '-1' ? '' : this.refs.buildingSelectList.getDefCommCode();
        params.state = this.refs.selectState.value === '-1' ? '' : this.refs.selectState.value;
        this.updateList(params);
    }

    updateList(params) {
        postJson('/comm/repair/query.x', $.param(params), function (data) {
            this.arrayList = data.list;
            this.setState({
                tBody: ''
            });
            if (params.page === 1) {
                layui.laypage({
                    cont: 'page'
                    , pages: Math.ceil(data.size / params.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            params.page = row.curr;
                            this.updateList(params);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    deleteRepair(id) {
        let index = layer.confirm('确定要删除？', {
            btn: ['确定', '取消']
        }, () => {
            postJson("/comm/repair/deleteRepair.x", $.param({
                'id': id
            }), () => {
                layer.close(index);
                this.queryVisitor(this.page);
            });
        });
    }

    seeInfo(repairInfo) {
        console.log("repairInfo", repairInfo);
        postJson('/comm/repair/queryOwnerInfo.x', {ownerCode: repairInfo.owner_code}, (data) => {
            this.setState({
                repairInfo: repairInfo,
                ownerInfo: data.data.ownerInfo
            }, () => {
                layer.open({
                    type: 1,
                    shade: false,
                    area: ['60%', 'auto'],
                    title: '反馈详情',
                    maxHeight: '80%',
                    shadeClose: true,
                    maxmin: true,
                    content: $('#info_modal') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            });
        })

    }

    showImage(url) {
        if (url) {
            layer.photos({
                photos: {
                    "title": "图片",
                    "data": [
                        {
                            "src": url
                        }
                    ]
                }, anim: 5
            });
        } else {
            layer.msg("此记录无照片!");
        }
    }

    submitTreatmentModal(repairObj) {
        layer.open({
            type: 1,
            shade: false,
            area: ['50%', 'auto'],
            title: false,
            minHeight: '80%',
            shadeClose: true,
            content: $('#treatment_result_modal'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['确定提交'],
            yes: () => {
                let params = {};
                params.id = repairObj.id;
                params.ownerCode = repairObj.owner_code;
                params.state = this.refs.treatmentSelectState.value;
                console.log("state", params.state);
                if (params.state === '1') {
                    params.repairPer = this.refs.repairPer.value;
                    params.repairPerPhone = this.refs.repairPerPhone.value;
                } else {
                    params.treatmentResult = this.refs.result_content.value;
                }
                postJson('/comm/repair/saveTreatmentResult.x', $.param(params), () => {
                        if (this.state.treatmentSelectState === '1') {
                            this.refs.repairPer.value = '';
                            this.refs.repairPerPhone.value = '';
                        } else {
                            this.refs.result_content.value = '';
                        }
                        this.queryVisitor();
                        layer.closeAll();
                        this.layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
                    }
                )
            }
        });
    }

    stateTypeView(type) {
        if (type === 1) {
            return (<div style={{color: 'blue'}}>已受理</div>)
        } else if (type === 2) {
            return (<div style={{color: '#9BCD9B'}}>维修完成</div>)
        } else {
            return (<div style={{color: 'red'}}>未处理</div>)
        }
    }

    tBody() {
        if (this.arrayList) {
            return this.arrayList.map(function (array) {
                return (<tr>
                    <td>{array.type}</td>
                    <td>{array.commit_time}</td>
                    <td>
                        {this.stateTypeView(array.state)}
                    </td>
                    <td>{array.detailed_addr}</td>
                    <td>{array.content}</td>
                    <td>{array.is_delete === 0 ? <div style={{color: 'blue'}}>正常</div> :
                        <div style={{color: 'red'}}>用户已删除</div>}</td>
                    <td>
                        <button type="button" className="layui-btn layui-btn-small"
                                onClick={() => this.seeInfo(array)}>详情
                        </button>
                        <button type="button" className="layui-btn layui-btn-small layui-btn-normal"
                                onClick={() => this.submitTreatmentModal(array)}>
                            结果
                        </button>
                        <button type="button" className="layui-btn layui-btn-small layui-btn-danger"
                                onClick={() => this.deleteRepair(array.id)}>
                            删除
                        </button>
                    </td>
                </tr>);
            }.bind(this));
        }
    }

    render() {
        const ownerInfo = this.state.ownerInfo;
        return <Frame header="物业报修列表">
                <form className="layui-form layui-form-pane">

                    <div className="layui-form-item">
                        <label className="layui-form-label">状态</label>
                        <div className="layui-input-inline">
                            <select ref="selectState" name="selectState" id="selectState" data-filter="selectState">
                                <option value="-1">默认</option>
                                <option value="0">未处理</option>
                                <option value="1">已受理</option>
                                <option value="2">维修完成</option>
                            </select>
                        </div>
                        <BuildingSelectList ref="buildingSelectList" isNotItem={true} isDef={true}
                                            selectCallback={(commCode) => this.selectCommCallback(commCode)}/>
                    </div>

                    <div className="layui-form-item">
                        <div className="table-responsive">
                            <table className="tabel layui-table">
                                <colgroup>
                                    <col width="100px"/>
                                    <col width="200px"/>
                                    <col width="100px"/>
                                    <col/>
                                    <col/>
                                    <col width="200px"/>
                                    <col width="205px"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>报修类型</th>
                                    <th>日期</th>
                                    <th>状态</th>
                                    <th>详细地址</th>
                                    <th>内容</th>
                                    <th>用户状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody name="tBody" id="tBody">{this.tBody()}</tbody>
                            </table>
                        </div>
                        <div id="page">
                        </div>
                    </div>

                    <div id="info_modal" style={{display: 'none', padding: '10px'}}>
                        <table className="layui-table" data-skin="line">
                            <colgroup>
                                <col width="150px"/>
                                <col/>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>报修人</td>
                                <td>{ownerInfo ? ownerInfo.ownerName : ''}</td>
                            </tr>
                            <tr>
                                <td>报修人手机号</td>
                                <td>{ownerInfo ? ownerInfo.ownerMob : ''}</td>
                            </tr>
                            <tr>
                                <td>报修时间</td>
                                <td>{this.state.repairInfo.commit_time}</td>
                            </tr>
                            <tr>
                                <td>小区</td>
                                <td>{ownerInfo ? '【' + ownerInfo.commCode + '】' + ownerInfo.commName : ''}</td>
                            </tr>
                            <tr>
                                <td>详细地址</td>
                                <td>{this.state.repairInfo.detailed_addr}</td>
                            </tr>
                            <tr>
                                <td>报修内容</td>
                                <td>{this.state.repairInfo.content}</td>
                            </tr>
                            <tr>
                                <td>进度状态</td>
                                <td>{this.stateTypeView(this.state.repairInfo.state)}</td>
                            </tr>

                            {this.state.repairInfo.state === 1 || this.state.repairInfo.state === 2 ?
                                <tr>
                                    <td>责任人姓名</td>
                                    <td>{this.state.repairInfo.repair_per}</td>
                                </tr> : ''}
                            {this.state.repairInfo.state === 1 || this.state.repairInfo.state === 2 ?
                                <tr>
                                    <td>责任人电话</td>
                                    <td>{this.state.repairInfo.repair_per_phone}</td>
                                </tr> : ''}

                            {this.state.repairInfo.state === 2 ?
                                <tr>
                                    <td>维修结果</td>
                                    <td>{this.state.repairInfo.treatment_result}</td>
                                </tr> : ''}

                            {this.state.repairInfo.image_urls ? this.state.repairInfo.image_urls.length > 0 ?
                                <tr>
                                    <td>报修图片</td>
                                    <td>{
                                        this.state.repairInfo.image_urls.map(function (url) {
                                            return <div className="Center-Container" style={divImgStyle}>
                                                <img className="Absolute-Center" style={imgStyle} src={url}
                                                     onClick={() => this.showImage(url)}/>
                                            </div>
                                        }.bind(this))
                                    }
                                    </td>
                                </tr> : '' : ''}
                            </tbody>
                        </table>
                    </div>

                    <div id="treatment_result_modal"
                         style={{
                             display: 'none',
                             height: "200px",
                             paddingLeft: '10px',
                             paddingRight: '10px',
                             paddingTop: '20px'
                         }}
                         className="layui-form-item">
                        <div className="layui-form-item">
                            <label className="layui-form-label">提交状态</label>
                            <div className="layui-input-inline">
                                <select ref="treatmentSelectState" name="treatmentSelectState"
                                        id="treatmentSelectState" data-filter="treatmentSelectState">
                                    <option value="1">已受理</option>
                                    <option value="2">维修完成</option>
                                </select>
                            </div>
                        </div>
                        {this.state.treatmentSelectState === '1' ? <div className="layui-form-item">
                                <div className="layui-form-item">
                                    <label className="layui-form-label">责任人姓名</label>
                                    <div className="layui-input-block">
                                        <input name="repairPer" ref="repairPer" data-verify="repairPer"
                                               placeholder="请输入责任人姓名"
                                               autoComplete="off" className="layui-input" type="text"/>
                                    </div>
                                </div>
                                <div className="layui-form-item">
                                    <label className="layui-form-label">责任人电话</label>
                                    <div className="layui-input-block">
                                        <input name="repairPerPhone" ref="repairPerPhone" data-verify="repairPerPhone"
                                               placeholder="请输入责任人电话"
                                               autoComplete="off" className="layui-input" type="text"/>
                                    </div>
                                </div>
                            </div> :
                            <div className="layui-form-item layui-form-text">
                                <label className="layui-form-label">维修结果</label>
                                <div className="layui-input-block">
                            <textarea ref="result_content" id="result_content" name="result_content"
                                      placeholder="请输入维修结果"
                                      className="layui-textarea" data-verify="textarea"/>
                                </div>
                            </div>
                        }
                    </div>
                </form>
        </Frame>
    }
}

let divImgStyle = {
    border: '1px solid #CDCDC1',
    float: 'left',
    marginLeft: '10px',
    width: '150px',
    height: '150px'
};

let imgStyle = {
    'max-height': '90%',
    'max-width': '90%'
};

ReactDOM.render(
    <QueryFeedback/>,
    document.getElementById('root')
);